<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>站内信</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="lib/mui.min.css">
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
	</head>

	<body>

		<style>
			html {
				font-size: 20px;
			}
			
			.mui-control-content {
				/*background-color: white;*/
				min-height: 500px;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
			.msg {
				padding: .5rem;
			}
			
			.msg_box {
				color: #5a5a5a!important
			}
			
			.msg_sub {
				margin: 0;
				overflow: hidden;
				color: #5A5A5A;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
			
			.msg_ctime {
				float: left;
			}
			
			.msg_status,
			.replay {
				float: right;
			}
			
			.replay {
				margin-left: .5rem;
				padding: 3px 5px;
			}
			
			.msg_cont {
				color: #5A5A5A;
			}
			
			.msg_item {
				border: 1px solid #d8d8d8;
				padding: .5rem;
				margin-bottom: .5rem;
				background-color: white;
			}
			
			.tabs {
				position: relative;
			}
			
			.mui-badge {
				position: absolute;
				right: 3rem;
				top: 10px
			}
			
			.has_read {
				background: #f8f8f8;
				color: a5a5a5!important
			}
			
			.has_read .msg_cont {
				color: #a5a5a5
			}
			
			.has_read .msg_sub {
				color: #a5a5a5
			}
			
			.msg_box {
				margin-bottom: 2.5rem
			}
		</style>
		<!--<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">站内信</h1>
		</header>-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item tabs" href="#item1mobile">
						私信<span class="mui-badge mui-badge-primary">6</span>
					</a>
					<a class="mui-control-item tabs" href="#item2mobile">
						系统<span class="mui-badge mui-badge-warning">6</span>
					</a>
					<!--<a class="mui-control-item" href="#item3mobile">
				全部公文
			</a>-->
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				
						<div class="mui-slider-group">
							<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
								<div id="scroll1" class="mui-scroll-wrapper">
									<div class="mui-scroll msg">

										<div class="msg_box">
											<div class="msg_item">
												<p class="msg_cont">【坛友互动】私人私信私人死心私人私信私，人死心私人私信私人死心私人私信私人死心</p>
												<div class="msg_sub">
													<span class="msg_ctime">6-20 12:33</span>
													<span class="replay">回复</span>
												</div>
											</div>
											<div class="msg_item">
												<p class="msg_cont">【坛友互动】私人私信私人死心私人私信私，人死心私人私信私人死心私人私信私人死心</p>
												<div class="msg_sub">
													<span class="msg_ctime">6-20 12:33</span>
													<span class="replay">回复</span>
												</div>
											</div>

											<div class="msg_item">
												<p class="msg_cont">【好友申请】私人私信私人死心私人私信私，人死心私人私信私人死心私人私信私人死心</p>
												<div class="msg_sub">
													<div class="sub_left">
														<span class="msg_ctime">6-20 12:33</span>
													</div>
													<div class="sub_right">
														<button class="replay">拒绝</button>
														<button class="replay">同意</button>
													</div>

												</div>
											</div>

											<div class="msg_item">
												<p class="msg_cont">【系统消息】私人私信私人死心私人私信私，人死心私人私信私人死心私人私信私人死心</p>
												<p class="msg_sub"><span class="msg_ctime">6-20 12:33</span></p>
											</div>
											<div class="msg_item">
												<p class="msg_cont">【坛友互动】私人私信私人死心私人私信私，人死心私人私信私人死心私人私信私人死心</p>
												<p class="msg_sub"><span class="msg_ctime">6-20 12:33</span><span class="replay">回复</span></p>
											</div>

											<div class="msg_item">
												<p class="msg_cont">【好友申请】私人私信私人死心私人私信私，人死心私人私信私人死心私人私信私人死心</p>
												<div class="msg_sub">
													<div class="sub_left">
														<span class="msg_ctime">6-20 12:33</span>
													</div>
													<div class="sub_right">
														<button class="replay mui-btn mui-btn-outlined mui-btn-mini">拒绝</button>
														<button class="replay">同意</button>
													</div>

												</div>
											</div>

											<div class="msg_item">
												<p class="msg_cont">【系统消息】私人私信私人死心私人私信私，人死心私人私信私人死心私人私信私人死心</p>
												<p class="msg_sub"><span class="msg_ctime">6-20 12:33</span></p>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div id="item2mobile" class="mui-slider-item mui-control-content">
								<div id="scroll2" class="mui-scroll-wrapper">
									<div class="mui-scroll msg">
										<div class="msg_box">
											<div class="msg_item">
												<p class="msg_cont">【系统消息】私人私信私人死心私人私信私，人死心私人私信私人死心私人私信私人死心</p>
												<p class="msg_sub"><span class="msg_ctime">6-20 12:33</span><span class="msg_status">标记为已读</span></p>
											</div>

											<div class="msg_item">
												<p class="msg_cont">【应用消息】私人私信私人死心私人私信私，人死心私人私信私人死心私人私信私人死心</p>
												<p class="msg_sub"><span class="msg_ctime">6-20 12:33</span><span class="msg_status">标记为已读</span></p>
											</div>

											<div class="msg_item">
												<p class="msg_cont">【管理消息】私人私信私人死心私人私信私，人死心私人私信私人死心私人私信私人死心</p>
												<p class="msg_sub"><span class="msg_ctime">6-20 12:33</span><span class="msg_status">标记为已读</span></p>
											</div>
											<div class="msg_item">
												<p class="msg_cont">【系统消息】私人私信私人死心私人私信私，人死心私人私信私人死心私人私信私人死心</p>
												<p class="msg_sub"><span class="msg_ctime">6-20 12:33</span><span class="msg_status">标记为已读</span></p>
											</div>

											<div class="msg_item has_read">
												<p class="msg_cont">【应用消息】私人私信私人死心私人私信私，人死心私人私信私人死心私人私信私人死心</p>
												<p class="msg_sub"><span class="msg_ctime">6-20 12:33</span><span class="msg_status">标记为未读</span></p>
											</div>

											<div class="msg_item has_read">
												<p class="msg_cont">【管理消息】私人私信私人死心私人私信私，人死心私人私信私人死心私人私信私人死心</p>
												<p class="msg_sub"><span class="msg_ctime">6-20 12:33</span><span class="msg_status">标记为未读</span></p>
											</div>
											<div class="msg_item has_read">
												<p class="msg_cont">【系统消息】私人私信私人死心私人私信私，人死心私人私信私人死心私人私信私人死心</p>
												<p class="msg_sub"><span class="msg_ctime">6-20 12:33</span><span class="msg_status">标记为未读</span></p>
											</div>

											<div class="msg_item has_read">
												<p class="msg_cont">【应用消息】私人私信私人死心私人私信私，人死心私人私信私人死心私人私信私人死心</p>
												<p class="msg_sub"><span class="msg_ctime">6-20 12:33</span><span class="msg_status">标记为未读</span></p>
											</div>

											<div class="msg_item has_read">
												<p class="msg_cont">【管理消息】私人私信私人死心私人私信私，人死心私人私信私人死心私人私信私人死心</p>
												<p class="msg_sub"><span class="msg_ctime">6-20 12:33</span><span class="msg_status">标记为未读</span></p>
											</div>

										</div>

									</div>
								</div>
							</div>
						</div>
					
			</div>

		</div>
		</div>
				</div>
		<script src="lib/mui.js"></script>
		<script src="lib/jquery-2.1.4.js"></script>
		<script>
			mui.init({
				swipeBack: false
			});
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: false //是否显示滚动条
				});

				//				var item2 = document.getElementById('item2mobile');

				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if(this.checked) {
						sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						//force repaint
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});
			})(mui);

			$(function() {
				//var height=document.body.clientHeight||document.documentElement.clientHeight;
				var height = $(window).height();
				console.log(height)
				$('.mui-content').height(height);

				$('.mui-slider').height(height)
				$('.mui-slider-group').height(height);

				//标记已读还是未读
				//				$('.msg_status').click(function(){
				//					var txt=$(this).text();
				//					$(this).parents('.msg_item').toggleClass('has_read');
				//					if(txt=="标记为已读"){
				//						$(this).text('标记为未读')
				//					}else{
				//						$(this).text('标记为已读')
				//					}
				//				})
			})
			
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						contentnomore:'没有更多数据了,亲！',
						callback: pullupfresh
					}

				}
			});
			
			
			function pulldownRefresh() {
				setTimeout(function() {
					location.reload();
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1500);
				//mui('#pullrefresh').pullRefresh().setStopped(true);
			}
			
			function pullupfresh(){
				console.log('im refresh');
				this.endPullupToRefresh(true);
			}
		</script>

	</body>

</html>